<template>
	<div>
		<div class="secction sec-goods">
			<div class="menus-wrapper">
				<ul class="menu-list">
					<li class="menu-item" :class="{current : currentIndex === index }" v-for="item, index in goodsList" :key="index" @click="handleMenu(index)">
						<i v-if="item.icon" :style="{backgroundImage: 'url('+ item.icon +')'}"></i>
						<span>{{item.name}}</span>
					</li>
				</ul>
			</div>
			<div class="foods-wrapper">
				<ul class="foods-list" ref="foodsUlRef">
					<li class="foods-item" v-for="item, index in goodsList" :key="index">
						<h3><!-- 优惠 -->{{item.name}}</h3>
						<div class="food-single" v-for="single, i in item.foods" :key='i'  @click="getSingleFood(single)">
							<div class="img-wrapper">
								<img v-lazy="single.icon">
							</div>
							<div class="content">
								<p class="tit"><!-- 南瓜粥 -->{{single.name}}</p>
								<p class="desc"><!-- 粥甜 -->{{single.description}}</p>
								<p class="p3">
									<span>月售{{single.sellCount}}份</span>
									<span>好评率{{single.rating}}%</span>
								</p>
								<p class="price">
									<span class="new">￥{{single.price}}</span>
									<span class="old" v-if="single.oldPrice">￥{{single.oldPrice}}</span>
								</p>
							</div>
							<CartControl :food="single" :cartFood="cartFood"></CartControl>
						</div>
					</li>
				</ul>
			</div>
			<ShowCart :cartFood="cartFood"></ShowCart>
		</div>
		<Food :food="singleFood" :cartFood="cartFood" ref="foodRef"></Food>
		
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	import CartControl from '../../components/CartControl/CartControl.vue'
	import Food from '../../components/Food/Food.vue'
	import ShowCart from '../../components/ShowCart/ShowCart.vue'
	export default {
		data() {
			return {
				// 商品列表数据数组
				goodsList: [],
				// 右侧滑动的Y轴坐标（滑动过程中实时变化）
				scrollY: 0,
				// 所有右侧分类li的top组成的数组（列表第一次显示后不再变化）
				tops: [],
				// 点击的食品数据对象
				singleFood: {},
				// 购物车数据数组
				cartFood: []
			}
		},
		created() {
			this.getGoods()
		},
		methods: {
			// 获取商品列表
			async getGoods() {
				const {	data : res } =	await this.$http.get('/shop_goods')
				console.log('商品',res)
				
				if(res.code !== 0) return console.log('获取商品列表失败')
				
				this.goodsList = res.data
			},
			// 初始化betterScroll
			_initScroll() {
				new BScroll('.menus-wrapper', {
					click: true
				})
				this.foodsScroll = new BScroll('.foods-wrapper', {
					// 获取坐标必须开启
					probeType: 2,
					click: true
				})
				
				// 右侧列表绑定scroll监听
				this.foodsScroll.on('scroll', ({x, y}) => {
					// console.log(x,y)
					this.scrollY = Math.abs(y)
					// console.log(this.scrollY)
				})
				
				// 为了不频繁调用scroll，在scroll结束的时候获取y值
				this.foodsScroll.on('scrollEnd', ({x, y}) => {
					this.scrollY = Math.abs(y)
				})
				
			},
			// 初始化获得Top值
			_initTops() {
				// 1.容器
				const tops = []
				let top = 0
				tops.push(top)
				// 2.收集
				// 获取右侧食物分类的列表
				const lis = this.$refs.foodsUlRef.querySelectorAll('.foods-item')
				
				// 原来lis是伪数组所以转换
				Array.prototype.slice.call(lis).forEach(li => {
					// 获取li的高度累加push到tops里
					top += li.clientHeight
					tops.push(top)
				})
				
				// 3.更新数据
				this.tops = tops
				
			},
			// 左侧菜单点击事件
			handleMenu(index) {
				const scrollY = -this.tops[index]
				/*
					参数：
					{number} x 横轴坐标（单位 px）
					{number} y 纵轴坐标（单位 px）
					{number} time 滚动动画执行的时长（单位 ms）
					{Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 packages/shared-utils/src/ease.ts 里的写法
					{Object} extraTransform，只有在你想要修改 CSS transform 的一些其他属性的时候，你才需要传入 
				*/
				this.foodsScroll.scrollTo(0, scrollY, 300, 'easing' )
			},
			// 获取被点击的食品信息
			getSingleFood(food) {
				// 更新展示的数据
				this.singleFood = food
				// 调用组件的方法
				this.$refs.foodRef.toggleShow()
			}
		},
		computed: {
			// 计算获得当前分类的下标
			currentIndex() {
				/*
					findIndex((数组独一的值（age）, 找到的下标) => {
						return age == 16
						如果里面有16这返回这个数组里16的下标
					})
				*/
				const index = this.tops.findIndex((single,index) => {
					return this.scrollY>=single && this.scrollY<this.tops[index+1]
				})
				return index
			}
		},
		watch: {
			goodsList(newVal) {
				this.$nextTick(() => {
					this._initScroll()
					this._initTops()
				})
			}
		},
		components: {
			CartControl,
			Food,
			ShowCart
		}
	}
</script>

<style lang="less" scoped>
	.sec-goods{
		display: flex;
		.menus-wrapper{
			flex: 0 0 80px;
			width: 80px;
			background: #eee;
			height: 350px;
			overflow: hidden;
			.menu-list{
				.menu-item{
					position: relative;
					padding: 15px 0;
					font-size: 12px;
					text-align: center;
					&.current{
						background: #fff;
						color: #03A774;
						&::before{
							display: none;
						}
					}
					&:last-child{
						&::before{
							display: none;
						}
					}
					&::before{
						position: absolute;
						content: '';
						width: 80%;
						height: 1px;
						left: 50%;
						bottom: 0;
						background: #dfdfdf;
						transform: translate(-50%,-50%);
					}
					i{
						display: inline-block;
						width: 15px;
						height: 15px;
						margin-right: 8px;
						vertical-align: middle;
						background-size: cover;
						background-repeat: no-repeat;
					}
					span{
						font-weight: 600;
					}
				}
			}
		}
		// 食物
		.foods-wrapper{
			flex: 1;
			width: 100%;
			height: 350px;
			overflow: hidden;
			.foods-list{
				.foods-item{
					position: relative;
					h3{
						background: #eee;
						color: #999;
						padding: 8px;
						position: relative;
						font-size: 13px;
						&::before{
							content: "";
							position: absolute;
							width: 2px;
							height: 100%;
							left: 0;
							top: 0;
							background: #999;
						}
					}
					.food-single{
						padding: 10px;
						background: #fff;
						display: flex;
						position: relative;
						flex-direction: row;
						&:last-child{
							&::before{
								display: none;
							}
						}
						&::before{
							content: "";
							position: absolute;
							width: 80%;
							height: 1px;
							background: #efefef;
							bottom: 0;
							left: 50%;
							transform: translate(-50%,-50%);
						}
						.img-wrapper{
							flex: 0 0 60px;
							width: 60px;
							margin-right: 10px;
							img{
								width: 100%;
							}
						}
						.content{
							> p{
								margin-bottom: 7px;
							}
							flex: 1;
							font-size: 12px;
							.tit{
								font-size: 15px;
								font-weight: 700;
							}
							.desc{
								color: #999;
								overflow:hidden;
								text-overflow:ellipsis;
								display:-webkit-box;
								-webkit-box-orient:vertical;
								-webkit-line-clamp:1; 
							}
							.p3{
								color: #999;
								span{
									margin-right: 13px;
								}
							}
							.price{
								span{
									&.new{
										color: #d61024;
										font-size: 14px;
										margin-right: 6px;
									}
									&.old{
										font-size: 12px;
										color: #999;
										text-decoration: line-through;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
	@media (max-height: 812px) {
		.menus-wrapper{
			height: 510px !important;
		}
		.foods-wrapper{
			height: 510px !important;
		}
	}
	
	@media (max-height: 750px) {
		.menus-wrapper{
			height: 435px !important;
		}
		.foods-wrapper{
			height: 435px !important;
		}
	}
	
	@media (max-height: 690px) {
		.menus-wrapper{
			height: 366px !important;
		}
		.foods-wrapper{
			height: 366px !important;
		}
	}
</style>
